<template>
  <div class="clearfix" v-bind="$attrs">
    <el-row class="clearfix">
      <div class="fl">
        <TypeSelection :data="data" :default-value="value" :on-change="handleTypeChange" />
        <el-date-picker v-if="dateVisible" v-model="date" :style="{position: 'relative', top: '1px'}" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
        <el-button v-if="hiddenButton" plain @click="handleSwitch">{{ visible ? "收起" : "筛选" }}<i :class="visible?'el-icon-arrow-up el-icon--right':'el-icon-arrow-down el-icon--right'" /></el-button>
      </div>
      <div class="fr">
        <slot name="actions" />
      </div>
    </el-row>
    <slot v-if="visible" />
  </div>
</template>

<script>
import { TypeSelection, timeToUnix, dateToFinalTime, dateToZeroTime } from "@monkey.do/monkey";
import "@/assets/styles/search-box.scss";

export default {
  name: 'Search',
  components: { TypeSelection },
  props: {
    data: {
      type: Array,
      default: () => ([]),
    },
    onChange: {
      type: Function,
      default: () => {
      },
    },
    dateChange: {
      type: Function,
      default: () => {
      },
    },
    hiddenButton: {
      type: Boolean,
      default: false,
    },
    search: {
      type: Boolean,
      default: true,
    },
    attribute: {
      type: String,
      default: "createDate",
    },
    dataValue: {
      type: String,
      default: "today",
    },
  },
  data() {
    return {
      visible: false,
      dateVisible: false,
      date: null,
      value: 'today',
    };
  },
  watch: {
    value: {
      handler(olds, news) {
        this.$emit('search', this.dateVisible);
      },
    },
    dataValue: {
      handler(val) {
        console.log(val, 'cal');
        if (!val) {
          this.value = "today";
        } else {
          this.value = val;
        }
      },
      deep: true,
    },
  },
  methods: {
    getValue() {
      return this.value;
    },

    handleSwitch() {
      this.visible = !this.visible;
    },
    scheduling() {
      this.value = "thisWeek";
    },
    handleTypeChange(value) {
      this.dateVisible = value.id === "custom";
      if (value.id !== "custom") {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const timeStamp = new Date(year + "-" + month + "-" + day).valueOf();
        const weekNum = date.getDay() ? date.getDay() : 7;
        const lastDate = timeStamp + (7 - weekNum) * 24 * 60 * 60 * 1000;
        const firstDate = lastDate - 6 * 24 * 60 * 60 * 1000;
        let beginTime;
        let endTime;
        if (value.id === "all") {
          beginTime = "";
          endTime = "";
        }
        if (value.id === "today") {
          beginTime = year + "-" + month + "-" + day + " 00:00:00";
          endTime = year + "-" + month + "-" + day + " 23:59:59";
        }
        if (value.id === "yesterday") {
          const dates = new Date(timeStamp - 24 * 60 * 60 * 1000);
          beginTime = this.dateHandle(dates) + " 00:00:00";
          endTime = this.dateHandle(dates) + " 23:59:59";
        }
        if (value.id === "tomorrow") {
          const dates = new Date(timeStamp + 24 * 60 * 60 * 1000);
          beginTime = this.dateHandle(dates) + " 00:00:00";
          endTime = this.dateHandle(dates) + " 23:59:59";
        }
        if (value.id === "week") {
          const dates = new Date(timeStamp - 7 * 24 * 60 * 60 * 1000);
          beginTime = this.dateHandle(dates) + " 00:00:00";
          endTime = year + "-" + month + "-" + day + " 23:59:59";
        }
        if (value.id === "afterWeek") {
          const dates = new Date(timeStamp + 7 * 24 * 60 * 60 * 1000);
          beginTime = year + "-" + month + "-" + day + " 00:00:00";
          endTime = this.dateHandle(dates) + " 23:59:59";
        }
        if (value.id === "month") {
          const days = new Date(year, month - 1, 0).getDate();
          const dates = new Date(timeStamp - days * 24 * 60 * 60 * 1000);
          beginTime = this.dateHandle(dates) + " 00:00:00";
          endTime = year + "-" + month + "-" + day + " 23:59:59";
        }
        if (value.id === "thisWeek") {
          beginTime = this.dateHandle(firstDate) + " 00:00:00";
          endTime = this.dateHandle(lastDate) + " 23:59:59";
        }
        if (value.id === "lastWeek") {
          const firstDates = firstDate - 7 * 24 * 60 * 60 * 1000;
          const lastDates = lastDate - 7 * 24 * 60 * 60 * 1000;
          beginTime = this.dateHandle(firstDates) + " 00:00:00";
          endTime = this.dateHandle(lastDates) + " 23:59:59";
        }
        if (value.id === "nextWeek") {
          const firstDates = firstDate + 7 * 24 * 60 * 60 * 1000;
          const lastDates = lastDate + 7 * 24 * 60 * 60 * 1000;
          beginTime = this.dateHandle(firstDates) + " 00:00:00";
          endTime = this.dateHandle(lastDates) + " 23:59:59";
        }
        const json = {};
        json["timeType"] = value.id;
        json[this.attribute] = beginTime + "_" + endTime;
        this.$emit("change", json);
      }
      this.value = value.id;
      this.clean();
    },
    dateHandle(date) {
      const dates = new Date(date);
      const year = dates.getFullYear();
      const month = dates.getMonth() + 1;
      const day = dates.getDate();
      return year + "-" + month + "-" + day;
    },

    handleDateChange(value) {
      if (value) {
        const date = new Date(dateToZeroTime(value[0]));
        const dates = new Date(dateToFinalTime(value[1]));
        const beginTime = date.getFullYear() + "-" + Number(date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
        const endTime = dates.getFullYear() + "-" + Number(dates.getMonth() + 1) + "-" + dates.getDate() + " 23:59:59";
        // this.$emit("dateChange", {
        //   beginTime: String(dateToZeroTime(value[0])),
        //   endTime: String(dateToFinalTime(value[1])),
        //   timeType: undefined,
        // });
        const json = {};
        json["timeType"] = value.id;
        json[this.attribute] = beginTime + "_" + endTime;
        this.$emit("dateChange", json);
        this.dateChange({
          beginTime: timeToUnix(value[0]),
          endTime: timeToUnix(value[1]),
        });
      } else {
        const json = {};
        json[this.attribute] = "";
        this.$emit("dateChange", json);
        this.dateChange({
          beginTime: undefined,
          endTime: undefined,
        });
      }
    },
    clean() {
      this.date = null;
    },
  },
};
</script>
<style lang="scss" scoped>
// /deep/.el-date-editor.el-range-editor {
//   width: 180px !important;
// }
</style>
